<template>
    <div>
                <!-- 面包屑 -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
<!-- 卡片试图 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
<!-- 表格 -->
    <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index border :show-row-hover="false">
    
    <!-- 是否有效 -->
    <template slot="isok" slot-scope="scope">
        <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen"></i>
        <i class="el-icon-error" v-else style="color:red"></i>
    </template>
     <!-- 排序 -->
    
    <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
        <el-tag size="mini" type="warning" v-else-if="scope.row.cat_level === 2">三级</el-tag>
    </template>

    <!-- 操作 -->
    <template slot="opt" slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCateById(scope.row.cat_id)">删除</el-button>
    </template>
    </tree-table>
               
               
               </el-col>
            </el-row>

<!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="querInfo.pagenum" :page-sizes="[3, 5, 20, 15]" :page-size="querInfo.pagesize"
    layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
<!-- 添加分类的对话框 -->
         <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @closed="addCateDialogClosed">
            
            <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="150px">
            <el-form-item label="分类名称：" prop="cat_name" label-width="150px">
                <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类：">
                    <!-- options用来指定数据源 -->
            <el-cascader  expand-trigger="hover" :options="parentCateList" :props="cascaderProps"
                @change="parentCateChanged" v-model="selectedKeys" clearable change-on-select></el-cascader>
            </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
            </el-dialog>


            <!-- 修改分类对话框 -->
            <el-dialog title="修改分类" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
            
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
            <el-form-item label="分类名：" prop="cat_name" label-width="90px">
                <el-input v-model="editForm.cat_name" ></el-input>
            </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editCateInfo">确 定</el-button>
            </span>
            </el-dialog>

    </div>
</template>
<script>
export default{
    data(){
        return{
        // 查询条件
        querInfo:{
            type:3,
            pagenum:1,
            pagesize:5
        },
        // 商品分类的数据列表默认为空
        catelist:[],
        total:0,
        columns:[{
            label:'分类名称',
            prop:'cat_name',

        },
        {
            label:'是否有效',
            type:'template',
            template:'isok'
        },
        {
            label:'排序',
            type:'template',
            template:'order'
        },
        {
            label:'操作',
            type:'template',
            template:'opt'
        }
        ],
        addCateDialogVisible:false,
        addCateForm:{
            cat_name:'',
            // 父级分类的id
            cat_pid:0,
            // 默认要添加的是一级分类 0代表一级 逐层加
            cat_level:0
            
        },  
        addCateFormRules:{
            cat_name:[
                {
                       required:true,
                        message:'请输入分类名称',
                        trigger:'blur'
                }
            ],

        },
        parentCateList:[],
        cascaderProps:{
            value:'cat_id',
            label:'cat_name',
            children:'children'
        },
        // 选中的父级分类的id数组
        selectedKeys:[],
        editDialogVisible:false,
        editForm:{},
        editFormRules:{
            cat_name:[{
                required:true,
                message:'请输入分类名',
                trigger:'blur'
            }]
        },
        editCateId:''
        }
        
    },
    created(){
        this.getCateList()
    },
    methods:{
        // 获取商品分类数据
        async getCateList(){
            const {data:res} = await this.$http.get('categories',{params:this.querInfo})
            if(res.meta.status!==200){
                return this.$message.error('获取商品分类失败')
            }
            console.log(res.data);
            this.total = res.data.total
            this.catelist = res.data.result
        },
        handleSizeChange(newSize){
            this.querInfo.pagesize = newSize
            this.getCateList()
        },
        handleCurrentChange(newPage){
            this.querInfo.pagenum = newPage
            this.getCateList()
        },
        showAddCateDialog(){
            // 先获取父级分类的数据列表再展示出对话框
            this.getParentCateList()
            this.addCateDialogVisible = true
        },
        async getParentCateList(){
            const {data:res} = await this.$http.get('categories',{
                params:{
                    type:2
                }
            })
            if(res.meta.status!==200){
                return this.$message.error('获取父级分类数据失败')
            }
            console.log(res.data)
            this.parentCateList = res.data
        },
        parentCateChanged(){
            console.log(this.selectedKeys)
            if(this.selectedKeys.length>0){
                this.addCateForm.cat_pid = this.selectedKeys
                [this.selectedKeys.length-1]
                this.addCateForm.cat_level = this.selectedKeys.length
            }else{
                this.addCateForm.cat_pid = 0
                this.addCateForm.cat_level = this.selectedKeys.length
            }
        },
        addCate(){
            console.log(this.addCateForm)
            this.$refs.addCateFormRef.validate( async valid=>{
                if(!valid)return
                const {data:res} = await this.$http.post('categories',this.addCateForm)
                if(res.meta.status!==201){
                    return this.$message.error('添加分类失败')
                }
                this.$message.success('添加分类成功')
                this.getCateList()
                this.addCateDialogVisible = false
            })
        },
        addCateDialogClosed(){
            this.$refs.addCateFormRef.resetFields()
            this.selectedKeys=[]
            this.addCateForm.cat_level = 0
            this.addCateForm.cat_pid = 0
        },
        async showEditDialog(cateInfo){
            this.editCateId = cateInfo.cat_id
            const{data:res} = await this.$http.get('categories/'+cateInfo.cat_id)
            if(res.meta.status !==200){
                return this.$message.error('查询用户信息失败')
            }
            this.editForm = res.data
            this.editDialogVisible = true
        },
        editDialogClosed(){
            this.$refs.editFormRef.resetFields()
        },
        // 修改用户信息并提交
        async editCateInfo(){
                const{data:res} = await this.$http.put('categories/'+this.editForm.cat_id,{
                    cat_name:this.editForm.cat_name
                })
                if(res.meta.status !==200){
                    return this.$message.error('修改用户信息失败')
                }
                    this.$message.success('修改用户信息成功')
                    // 隐藏添加用户的对话框
                    this.editDialogVisible = false
                    // 重新获取用户列表数据
                    this.getCateList()
        },
        async removeCateById(id){
            
            const confirmResult =  await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).catch(err=>err)
        console.log(confirmResult);
        if(confirmResult !='confirm'){
            return this.$message.info('已取消删除')
        }
        const {data:res} = await this.$http.delete('categories/'+id)
        if(res.meta.status !==200){
            return this.$message.error('删除用户失败')
        }
        this.$message.success('删除用户成功')
        this.getCateList()
        },
    }
}
</script>
<style lang="less" scoped>

.el-cascader{
    width: 100%;
}
</style>